<template>
  <div>
    <h3>普通下拉框，远程搜索</h3>
    <selectSearch
        placeholder="普通下拉框，远程搜索"
        v-model="selectValue"
        :optionSource="stepList"
        valueKey="label"
        @change="selectChange"
        filterable
        width="300px"
        remote
        :loading="loading"
        :remote-method="remoteMethod"
    ></selectSearch>
    
  </div>
</template>

<script>
import selectSearch from '../../components/selectSearch.vue'
export default {
  name: 'selectSearchOriginView',
  components: {
    selectSearch,
  },
  data() {
    return {
      loading: false,
      selectValue: null,
      stepList: []
    }
  },
  methods: {
    selectChange(val) {
      console.log('selectChange', val, this.selectValue)
    },
    remoteMethod(query) {
        console.log("🚀 ~ remoteMethod ~ query:", query)
        if (query.length >= 1) {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.stepList = [
              { label: '11', id: 1 },
              { label: '22', id: 2 },
              { label: '33', id: 3 },
              { label: '44', id: 4 },
              { label: '55', id: 5 },
              { label: '66', id: 6 },
              { label: '77', id: 7 },
              { label: '88', id: 8 }]
          }, 200);
        } else if(query.length > 2) {
          this.stepList = [
          { label: '1', id: 1 },
          { label: '2', id: 2 },
          { label: '3', id: 3 },
          { label: '4', id: 4 },
          { label: '5', id: 5 },
          { label: '6', id: 6 },
          { label: '7', id: 7 },
          { label: '8', id: 8 }];
        }
      }
  }
}
</script>
